import React, { memo, useEffect, useState } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { getCircusDataAction } from "./store/actionCreators";
import { CircusWrapper, CircusTitle } from "./style";
import Null from "@/components/null";
import User from "@/components/user";

export default memo(function Circus() {
  const [isActive, setIsActive] = useState(true);
  const { userInfo } = useSelector(
    (state) => ({
      userInfo: state.getIn(["user", "userInfo"]),
    }),
    shallowEqual
  );
  const { circusList, fansList } = useSelector(
    (state) => ({
      circusList: state.getIn(["circus", "circusList"]),
      fansList: state.getIn(["circus", "fansList"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getCircusDataAction(userInfo.userId));
  }, [dispatch, userInfo]);

  return (
    <CircusWrapper>
      <CircusTitle>
        <span
          className={["result-title-item ", isActive ? "active" : ""].join(" ")}
          onClick={(e) => setIsActive(true)}
        >
          关注
        </span>
        <span
          className={["result-title-item ", isActive ? "" : "active"].join(" ")}
          onClick={(e) => setIsActive(false)}
        >
          粉丝
        </span>
      </CircusTitle>
      <div className="main">
        {isActive ? (
          circusList.length !== 0 ? (
            <User data={circusList} />
          ) : (
            <Null>还没有关注的用户噢~</Null>
          )
        ) : fansList.length !== 0 ? (
          <User data={fansList} />
        ) : (
          <Null>还没有人关注你噢~</Null>
        )}
      </div>
    </CircusWrapper>
  );
});
